<template>
	<div class="short-player">
		<div class="play-wrapper">
			<i class="fa fa-chevron-left fa-1g back" aria-hidden="true" @click="$router.back()"></i>
			<video controls :src="Smallvideo.video.url"></video>
			<div class="info-wrapper">
				<div class="title">{{ Smallvideo.title }}</div>
			</div>
			<div class="right-wrapper">
				<div>
					<img :src="Smallvideo.user.avatarurl" alt="" class="header-pic" />
					<div class="icon-btn">
						<img src="../assets/img/5377c2c03dacf20b6e286e3e72dd57911272.png" />
					</div>
					<div class="text">{{ Smallvideo.upCount }}</div>
					<div class="icon-btn">
						<img src="../assets/img/8bdff1556f02f8f4a209643aba9b1fcf1636.png" />
					</div>
					<div class="text">评论</div>
					<div class="icon-btn">
						<img src="../assets/img/7e7aaf09a232efb02ff8697deb522d151367.png" />
					</div>
					<div class="text">分享</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { mapState } from "vuex";
	export default {
		data() {
			return {
				
			};
		},
		computed:{
			...mapState(["Smallvideo"]),
		}
	};
</script>

<style lang="less" scoped>
	.short-player {
		position: relative;
		width: 100%;
		height: 100vh;
		overflow-y: hidden;
		background-color: #eee;

		.play-wrapper {
			width: 100%;
			height: 100vh;
			background: transparent;
			left: 0;
			top: 0;
			z-index: 10;

			.back {
				position: absolute;
				color: #fff;
				top: 30px;
				left: 10px;
				z-index: 12;
			}

			video {
				width: 100%;
				background-color: #000;
				height: 100vh;
			}

			.info-wrapper {
				color: #fff;
				letter-spacing: 0;
				line-height: 24px;
				width: 282px;
				position: absolute;
				bottom: 71px;
				left: 15px;

				.title {
					font-family: PingFangSC-Medium;
					font-size: 19px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-bottom: 10px;
				}
			}

			.right-wrapper {
				position: absolute;
				right: 15px;
				bottom: 58px;
				width: 48px;
				z-index: 100;

				div {
					display: flex;
					flex-direction: column;
					flex-wrap: nowrap;
					align-items: center;

					.header-pic {
						width: 48px;
						height: 48px;
						border-radius: 100%;
						margin-bottom: 26px;
					}

					.icon-btn {
						width: 48px;
						height: 48px;
						display: flex;
						justify-content: center;
						align-items: center;
						background: rgba(0, 0, 0, 0.42);
						border-radius: 100%;
						margin-bottom: 4px;
						justify-content: center;

						img {
							width: 21.5px;
							height: 21.5px;
						}
					}

					.text {
						margin-bottom: 14px;
						font-size: 14px;
						color: #fff;
						letter-spacing: 0;
						text-align: center;
					}
				}
			}
		}
	}
</style>
